<template>
  <view class="page_box">
    <shopro-navbar :isBack="true">
      <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
        <view style="font-weight:bold;text-align: left;width: 100%;">{{ title }}</view>
      </view>
    </shopro-navbar>
    <view class="head_box">
      <!-- tab -->
      <view class="order-nav u-flex">
        <view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
              @tap="onNav(nav.id)">
          <view class="item-title" :class="{ 'title-active': orderType === nav.id }">{{ nav.title }}</view>
        </view>
      </view>
    </view>

    <view class="content_box">
      <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
        <block>
          <!-- 订单列表 -->
          <view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
                @tap.stop="jump('/pages/user/wallet/tgListContent', { id: titleId=='1'?order.vip_pink_id:order.vip_help_id,typeTitle:titleId })">
            <view class="order-head u-flex u-row-between">
              <text class="no">{{ order.vip_title }}</text>
              <text :class="order.status=='1'?'state':'gray'" >{{ order.status=='1'?'已成功':order.status=='0'?'进行中':'已结束'}}</text>
            </view>
            <view class="order-content">
              <view class="goods-intro">
                <view class="row">
                  <view class="goods-title">{{order.createtime_text+'-'+order.expiertime_text}}</view>
                </view>
              </view>
            </view>
            <view class="order-bottom">
              <!-- 按钮 -->
              <view class="btn-box u-flex">
                <button  class="obtn u-reset-button obtn3">
                  {{ titleId=='1'?'拼团详情':'砍价详情' }}
                </button>
              </view>
            </view>
          </view>

        </block>

        <!-- 空白页 -->
        <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
                      tipText="暂无信息，还有更多好货等着你噢~"></shopro-empty>
        <!-- 更多 -->
        <u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
                    color="#ccc" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title:'',
      titleId:'',
      isEmpty: false,
      loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      currentPage: 1,
      lastPage: 1,
      orderType: '0',
      orderList: [],
      orderState: [{
        id: '0',
        title: '全部',
        type: 'all'
      },
        {
          id: '1',
          title: '进行中',
          type: 'nopay'
        },
        {
          id: '2',
          title: '已结束',
          type: 'nosend'
        },
      ]
    };
  },
  onLoad(option) {
    if(option.typeId=='1'){
        this.title='我的拼团'
    }else if(option.typeId=='2'){
        this.title='我的砍价'
    }
    this.titleId = option.typeId
  },
  onShow() {
    this.orderList = [];
    this.currentPage = 1;
    this.lastPage = 1;
    this.getOrderList();
  },
  methods: {
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
    // tab切换
    onNav(id) {
      this.orderType = id;
      console.log(this.orderType)
      this.orderList = [];
      this.currentPage = 1;
      this.lastPage = 1;
      this.getOrderList();
    },
    // 拼团列表
    getOrderList() {
      let that = this;
      that.loadStatus = 'loading';
      let url = ''
      if(this.titleId=='1'){
        url='vip.pinklists'
      }else{
        url='vip.helplists'
      }
      that.$https(url, {
        token:uni.getStorageSync("token"),
        status:this.orderType
      }, '加载中...').then(res => {
        if (res.code === 1) {
          that.orderList = [...that.orderList, ...res.data.data];
          that.isEmpty = !that.orderList.length;
          that.lastPage = res.data.last_page;
          that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
        }
      });
    },
    // 加载更多
    loadMore() {
      if (this.currentPage < this.lastPage) {
        this.currentPage += 1;
        if (this.orderType == 'affte_sale') {
          this.getAftersaleList();
        } else {
          this.getOrderList();
        }
      }
    },

    // 删除订单
    onDelete(orderId, orderIndex) {
      let that = this;
      uni.showModal({
        title: '删除确认',
        content: '是否删除该订单？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            that.$http('order.deleteOrder', {
                  id: orderId
                },
                '删除中...'
            ).then(res => {
              if (res.code === 1) {
                that.$u.toast(res.msg);
                that.orderList.splice(orderIndex, 1);
              }
            });
          }
        }
      });
    },

    // 取消订单
    onCancel(id, orderIndex) {
      let that = this;
      uni.showModal({
        title: '取消确认',
        content: '是否确定取消该订单？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            that.$http('order.cancel', {
                  id: id
                },
                '取消中...'
            ).then(res => {
              if (res.code === 1) {
                that.$u.toast(res.msg);
                this.orderList.splice(orderIndex, 1);
              }
            });
          }
        }
      });


    },

    // 立即购买
    onPay(id, order) {
      var that = this;
      console.log("===============order", order, order.item)

      let confirmcartList = [];
      let isActivity = false;
      for (let item of order.item) {
        if (item.cart_type === 'invalid') {
          this.$u.toast('商品已失效');
          return false;
        }
        if (item.cart_type === 'activity') {
          isActivity = true;
        }
        order.item.goods_price = order.item.goods_sku_price_id ? order.item.goods_sku_price_id : 0;
        order.item.goods_type = order.order_type
        confirmcartList.push({
          goods_id: item.goods_id,
          sku_price_id: item.goods_sku_price_id ? item.goods_sku_price_id : 0,
          goods_price: item.sku_price ? item.sku_price.price : 0,
          goods_num: item.goods_num,
          goods_type: order.order_type,
          activity_type: item.activity_type || '',
          order_id: item.order_id
        });
      }
      if (confirmcartList.length > 1 && isActivity) {
        this.$u.toast('活动商品只能单独购买');
        return false;
      }
      that.jump('/pages/order/confirm', {
        goodsList: confirmcartList,
        from: 'list',
        orderType: order.type,
      });
      // uni.navigateTo({
      // 	url: `/pages/order/payment/method?orderId=${id}`
      // });
    },

    // 查看物流
    onExpress(orderId) {
      let that = this;
      that.$http('order.expressList', {
        order_id: orderId
      }).then(res => {
        if (res.code === 1) {
          if (res.data.length == 1) {
            this.jump('/pages/order/express/express-detail', {
              orderId: orderId,
              expressId: res.data[0].id
            });
          } else if (res.data.length > 1) {
            this.jump('/pages/order/express/express-list', {
              orderId: orderId
            });
          } else {
            that.$u.toast('暂无包裹~');
          }
        }
      });
    },
  }
};
</script>

<style>
page {
  background-color: #F8F8F8;
}
</style>
<style lang="scss">
.order-nav {
  // background: #fff;
  height: 88rpx;

  .nav-item {
    flex: 1;

    .item-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
      line-height: 88rpx;
    }

    .title-active {
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      border-bottom:4rpx solid #9D7423;
    }
  }
}

.order-list {
  background: #fff;
  margin: 20rpx 24rpx 24rpx;
  padding-bottom: 40rpx;
  border-radius: 16rpx;

  .order-bottom {
    .serve-status {
      height: 94rpx;
      background: rgba(246, 246, 246, 1);
      border-radius: 4rpx;
      margin: 0 20rpx 20rpx;
      padding: 0 20rpx;

      .serve-title {
        font-size: 26rpx;

        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-right: 30rpx;
      }

      .serve-content {
        font-size: 20rpx;

        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }

    .btn-box {
      justify-content: flex-end;

      button {
        margin: 0 20rpx 0 0;
        padding: 0;
      }
    }

    .all-msg {
      // font-size: 24rpx;
      // color: #999;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      justify-content: flex-end;
      margin-bottom: 28rpx;
      padding: 0 30rpx;

      .all-unit {
        font-size: 20rpx;
      }

      .all-money {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        // font-size: 26rpx;
        // color: #333;
        // font-weight: 500;
        // &::before {
        // 	content: '￥';
        // 	font-size: 20rpx;
        // }
      }
    }

    .obtn {
      width: 160rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #FFFFFF;
      border-radius: 108rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      border: 1rpx solid #999999;
    }

    .obtn1 {}

    .obtn2 {}

    .obtn3 {
      color: #9D7423;
      border: 1rpx solid #9D7423;
    }
  }

  .order-head {
    padding: 20rpx;
    height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;

    .no {
      color: #666666;
    }

    .state {
      color: #FE811C;
      font-size: 24rpx;
    }
    .gray{
      color: #999999;
      font-size: 24rpx;
    }
  }

  .order-content {
    padding: 0 20rpx;
    margin-bottom: 8rpx;
    display: flex;

    .goods_img {
      width: 200rpx;
      height: 150rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }

    .goods-intro {
      flex-grow: 1;

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .goods-title {
          font-weight: 500;
          color: #666666;
          font-size: 26rpx;
        }

        .goods-price {
          font-weight: bold;
          color: #333333;
          font-size: 28rpx;
        }

        .goods_sku,
        .goods-num {
          font-weight: 400;
          color: #777777;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
